<template>
    <div class="news">
        <div class="news-body">
            <div class="news-top">
                <div class="title f f-ac">
                    <img src="@/assets/fire.png" class="image" />导航菜单
                </div>
                <Type-btn :list="typeList" :current="queryForm.type" key-value="id" top="24" row-gap="15"
                    column-gap="40" border @click="handleType" />
                <div class="row f f-ac">
                    <el-input v-model="queryForm.search" placeholder="输入标题关键词" size="small" clearable
                        style="width: 242px; margin-right: 44px" @change="search" />
                    <div class="row-title">自定义</div>
                    <div>
                        <el-date-picker v-model="queryForm.startTime" type="date" placeholder="选择开始日期"
                            style="width: 140px" size="small" :picker-options="startPicker" @change="handleStart"
                            value-format="yyyy-MM-dd" />
                        -
                        <el-date-picker v-model="queryForm.endTime" type="date" size="small" placeholder="选择结束日期"
                            style="width: 140px" :picker-options="endPicker" @change="handleEnd"
                            value-format="yyyy-MM-dd" />
                    </div>
                </div>
            </div>
            <div class="news-box">
                <div v-for="(i, k) in dataList" :key="k" class="news-item f" :class="{ checked: i.hover }"
                    @click="handleDetail(i)" @mouseover="i.hover = true" @mouseleave="i.hover = false">
                    <img :src="baseUrl+i.image" />
                    <div class="info">
                        <div class="f f-ac f-jb">
                            <div class="f-1">
                                <div class="item-title f f-ac f-js">
                                    <div class="line-1">{{ i.title || "-" }}</div>
                                    <div class="code" v-if="i.is_new == 1">新</div>
                                </div>
                                <div class="item-row line-2">{{i.msg}}</div>
                                <div class="item-row">{{ i.createtime || "-" }}</div>
                            </div>
                            <div class="date f f-col f-ac f-jc">
                                <div>{{ splitData(i.createtime, "day") }}</div>
                                <div>{{ splitData(i.createtime, "month") }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Page-tool :size="queryForm.pageSize" :page="queryForm.currentPage" :total="total"
                @change-page="changePage" />
        </div>
    </div>
</template>

<script>
    import {
        newsCategory,
        newsList
    } from "@/utils/news/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                queryForm: {
                    search: "", // 搜索关键词
                    type: "1", // 艺术类型
                    state: "", // 状态
                    time: "", // 时间类型
                    startTime: "", // 开始时间
                    endTime: "", // 结束时间
                    pageSize: 12, // 条数
                    currentPage: 1, // 页数
                },
                total: 0, // 总数
                typeList: [],
                startPicker: {
                    // 开始时间限制
                    disabledDate: (time) => {
                        let endTime = this.queryForm.endTime;
                        if (endTime) return time.getTime() > new Date(endTime).getTime();
                    },
                },
                endPicker: {
                    // 结束时间限制
                    disabledDate: (time) => {
                        let startTime = this.queryForm.startTime;
                        if (startTime) return time.getTime() < new Date(startTime).getTime();
                    },
                },
                dataList: [],
            };
        },
        created() {
            this.queryForm.search = this.$route.query.search ? this.$route.query.search : ''
            this.getTypeList();

        },
        watch: {
            "$route"(v) {
                console.log(v, 'vvvvvv')
            },
        },

        methods: {
            // 搜索
            search() {
                this.getList();
            },
            // 获取资讯列表
            getList() {
                this.loading = true;
                let that = this
                let data = {
                    news_category_id: that.queryForm.type,
                    title: that.queryForm.search,
                    type: '',
                    page: that.queryForm.currentPage,
                    limit: 12,
                    starttime: that.queryForm.startTime,
                    type_time: '',
                    endtime: that.queryForm.endTime,
                    recommend: ''
                }
                newsList(data).then((response) => {
                    that.dataList = response.data.list.map(item => {
                        return {
                            ...item,
                            hover: false
                        }
                    })
                    that.total = response.data.count
                    that.loading = false;
                });
            },
            // 获取资讯分类
            getTypeList() {
                this.loading = true;
                let that = this
                newsCategory().then((response) => {
                    if (response.code == 200) {
                        response.data.unshift({
                            id: '',
                            name: "全部",
                        });
                        that.typeList = response.data
                        that.queryForm.type = that.typeList[0].id
                        this.getList();
                    }

                    that.loading = false;
                });
            },
            // 切换类型
            handleType(v) {
                this.queryForm.type = v.id;
                this.queryForm.currentPage = 1;
                this.getList();
            },
            // 切换状态
            handleStatus(v) {
                this.queryForm.state = v.value;
            },
            handleStart(v) {
                this.queryForm.startTime = v
                this.getList();
            },
            handleEnd(v) {
                this.queryForm.endTime = v
                this.getList();
            },
            // 切换时间
            handleTime(v) {
                let date = new Date();
                if (v.value == "") {
                    this.queryForm.startTime = "";
                    this.queryForm.endTime = "";
                } else if (v.value == 1) {
                    this.queryForm.startTime = this.$TimeFormat(date);
                    this.queryForm.endTime = this.$TimeFormat(date);
                } else if (v.value == 2) {
                    let mon =
                        date.getTime() -
                        3600 * 1000 * 24 * (date.getDay() == 0 ? 6 : date.getDay() - 1);
                    let sun =
                        date.getTime() +
                        3600 * 1000 * 24 * (date.getDay() == 0 ? 0 : 7 - date.getDay());
                    this.queryForm.startTime = this.$TimeFormat(mon);
                    this.queryForm.endTime = this.$TimeFormat(sun);
                } else if (v.value == 3) {
                    let month = date.getMonth();
                    let firstDay = new Date(date.getFullYear(), month, 1).getTime();
                    let lastDay = new Date(date.getFullYear(), month + 1, 0).getTime();
                    this.queryForm.startTime = this.$TimeFormat(firstDay);
                    this.queryForm.endTime = this.$TimeFormat(lastDay);
                }
                this.queryForm.time = v.value;
            },
            // 查看详情
            handleDetail(v) {
                this.$router.push({
                    path: "/consult/details",
                    query: {
                        id: v.id,
                    },
                });
            },
            // 拆分日期
            splitData(date, unit) {
                // date = date ? date.trim().split(' ')[0] : ""
                date = date ? date : ""
                if (unit == "day") {
                    return date.substr(8, 2);
                } else if (unit == "month") {
                    return date.substr(0, 7);
                } else {
                    return date || "-";
                }
            },
            // 切换页数
            changePage(page) {
                this.queryForm.currentPage = page;
                this.getList();
            }
        },
    };
</script>

<style lang="scss" scoped>
    .news {
        width: 100%;

        &-body {
            width: 1200px;
            min-height: 200px;
            margin: auto;

            .news-top {
                height: 179px;
                padding: 20px;
                margin-top: 30px;
                box-sizing: border-box;
                border-radius: 10px;
                box-shadow: 0px 0px 10px rgba(217, 217, 217, 0.3);

                .title {
                    font-size: 16px;
                    font-weight: 600;

                    .image {
                        width: 13px;
                        height: 15px;
                        margin-right: 10px;
                    }
                }

                .row {
                    height: 36px;
                    width: 100%;
                    margin-top: 20px;

                    &-title {
                        color: #909090;
                        font-size: 14px;
                        margin-right: 7px;
                    }

                    .type-item {
                        display: inline-block;
                        min-width: 70px;
                        text-align: center;
                        height: 27px;
                        line-height: 27px;
                        color: #333;
                        background-color: #f4f4f4;
                        margin-right: 10px;
                        font-size: 12px;
                        border-radius: 3px;
                        padding: 0 10px;
                        box-sizing: border-box;

                        &:hover {
                            user-select: none;
                            cursor: pointer;
                        }
                    }

                    .checked {
                        color: #fff;
                        background-color: #193980;
                    }
                }
            }

            .news-box {
                width: 100%;
                padding-top: 30px;

                .news-item {
                    margin-bottom: 30px;
                    width: 100%;
                    height: 160px;
                    padding: 20px;
                    box-sizing: border-box;
                    border-radius: 10px;
                    border: 1px solid transparent;
                    box-shadow: 0 1px 10px 0 rgba(217, 217, 217, 0.3);
                    transition: all 0.5s;

                    img {
                        width: 203px;
                        height: 120px;
                        border-radius: 8px;
                        margin-right: 20px;
                    }

                    .info {
                        width: 937px;

                        .item-title {
                            max-width: 700px;
                            color: #000000;
                            font-size: 16px;

                            >div:first-child {
                                max-width: 660px;
                            }

                            .code {
                                width: 20px;
                                height: 20px;
                                font-size: 12px;
                                border-radius: 5px;
                                line-height: 20px;
                                margin-left: 20px;
                                color: #fff;
                                text-align: center;
                                background-color: #f59443;
                            }
                        }

                        .item-row {
                            color: #909090;
                            width: 790px;
                            font-size: 12px;
                            margin: 10px 0;
                        }
                    }

                    .date {
                        width: 121px;
                        height: 121px;
                        color: #466ec5;
                        font-weight: 600;
                        font-size: 16px;
                        border-radius: 10px;
                        transition: all 0.5s;
                        border: 1px solid #466ec5;

                        >div:first-child {
                            font-size: 25px;
                        }
                    }
                }

                .checked {
                    cursor: pointer;
                    border: 1px solid rgba(70, 110, 197, 0.3);
                    box-shadow: 0px 0px 20px rgba(70, 110, 197, 0.3);

                    .date {
                        color: #fff;
                        border: 1px solid #fff;
                        background-color: #466ec5;
                    }
                }
            }
        }
    }
</style>